<template>
    <div :id="chartId" :style="'width: 100%; min-height: 100%; max-height: '+ maxHeight +'px;'"></div>
</template>

<script>
import echarts from 'echarts';

export default {
    props: {
        // 标题
        title: {
            type: String,
            default: '',
        },
        // 配置 && 数据
        options: {
            type: Object,
            default () {
                return {};
            }
        },
        // 缩放
        zoom: {
            type: Boolean,
            default: true,
        },
        // false时只在 tooltip hover 的时候显示点的label
        seriesShowSymbol: {
            type: Boolean,
            default: true,
        },
    },
    components: {

    },
    data() {
        return {
            loading: false,
            chartId: 'chart',
            echartsInstance: null,
            echartsOption: {
                legend: {
                    data: [],
                    selected: {},
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                title: {
                    text: '数据图表',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        animation: true,
                        label: {
                            show: true,
                        }
                    },
                    // formatter: '{b0}<br>{a0}: {c0}<br>{a1}:{c1}', // https://echarts.apache.org/zh/option.html#tooltip.formatter
                    // position: function (pt) {
                    //     return [pt[0], '10%'];
                    // }
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none',
                        },
                        restore: {},
                        saveAsImage: {},
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    // axisLabel: {
                    //     rotate: 45, // 标签旋转
                    // }
                    // data: [],
                },
                yAxis: {
                    type: 'value',
                    // boundaryGap: [0, '100%'],
                    splitLine: {
                        show: true,
                    },
                    scale: true,
                    // axisLabel: { // https://echarts.apache.org/zh/option.html#yAxis.axisLabel.formatter
                    //     show: true,
                    //     interval: 'auto',
                    //     formatter: '{value} 亿'
                    // },
                },
                series: [],
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 100
                }],
            },
            resizeTimeout: null,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight;
        },
    },
    watch: {
        options: {
            handler(val, old) {
                console.log(val, old)
                this.setChartOptions();
            },
            deep: true,
        },
        maxHeight() {
            // 高度变化时调整图表大小
            if (this.echartsInstance) {
                window.clearTimeout(this.resizeTimeout);
                this.resizeTimeout = setTimeout(this.echartsInstance.resize, 1000);
            }
        },
    },
    methods: {
        setChartOptions() {
            // this.initChartOptions();
            let options = Object.assign({}, this.$helper.deepClone(this.echartsOption), this.options);
            if (this.title) options.title.text = this.title;
            if (!this.zoom) delete options.dataZoom;

            //1. series为[series1[ [x, y], [x1, y1] ], series2[ [x, y], [x1, y1] ]], 多条线的组合
            //2. series为[series1[y,y...], series2[y,y...]], 多条线的组合, 这时需要设置xAxis.data, 并注意如果某条线中缺了一个点, 后面的数据会全乱
            if (options.series.length) {
                let series = [];
                options.series.map((v, k) => {
                    let seriesOption = {
                        type: 'line',
                        smooth: true,
                        label: {
                            show: true,
                        },
                        showSymbol: this.seriesShowSymbol,
                        data: v,
                    };
                    // 自定义格式处理
                    if (options.seriesFormatter) seriesOption.label.formatter = options.seriesFormatter;

                    seriesOption.name = options.legend.data[k];
                    series.push(seriesOption);
                });
                options.series = series;
            }
            this.echartsInstance.setOption(options, true);
        },
        // initChartOptions() {
        //     this.echartsOption.series = [];
        //     this.echartsOption.legend.data = [];
        //     this.echartsOption.xAxis.data = [];
        //     this.echartsInstance.setOption(this.echartsOption);
        // },
    },
    mounted() {
        this.echartsInstance = echarts.init(document.getElementById(this.chartId));
        this.setChartOptions();
    },
    created() {
        this.chartId = 'chart'+ parseInt(Math.random() * 10000);
    },
    beforeDestroy() {
        // 销毁时清空图表实例, 清除定时器
        this.echartsInstance.clear();
        this.resizeTimeout = null;
    },
    destroyed() {

    }
}
</script>

<style lang="scss" scoped>

</style>
